<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ITSM系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!--引入 element-ui 的样式-->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.zhimg.com/element-ui@2.15.14/lib/index.js"></script>
<#--    <link rel="stylesheet" href="css/bootstrap.min.css">-->
<#--    <link rel="stylesheet" href="css/font-awesome.css">-->
<#--    <link rel="stylesheet" href="css/AdminLTE.min.css">-->
<#--    <link rel="stylesheet" href="css/all-skins.min.css">-->
<#--    <link rel="stylesheet" href="css/main.css">-->
</head>

<body class="hold-transition login-page" style="background:#3285d9">
<div id="app">

    <el-card class="box-card" style="margin-top: 12%; width:600px; margin-left: 20%" shadow="hover">
        <span>ITSM系统</span>
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>

    </el-card>


    </div>


<#--    <div class="login-box" id="rrapp" style="margin-top: 12%" v-cloak>-->
<#--        <div class="login-box-body">-->
<#--            <p class="login-box-msg" style="font-size: 25px;font-weight:bold">ITSM系统</p>-->
<#--            <div v-if="error" class="alert alert-danger alert-dismissible">-->
<#--                <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>-->
<#--            </div>-->
<#--            <div class="form-group has-feedback">-->
<#--                <input type="text" class="form-control" v-model="username" placeholder="账号" @keyup.enter="login">-->
<#--                <span class="fa fa-user form-control-feedback"></span>-->
<#--            </div>-->
<#--            <div class="form-group has-feedback">-->
<#--                <input type="password" class="form-control" v-model="password" placeholder="密码" @keyup.enter="login">-->
<#--                <span class="fa fa-lock form-control-feedback"></span>-->
<#--            </div>-->
<#--            <div class="form-group has-feedback">-->
<#--                <input type="text" style="width: 50%;display: inline-block" class="form-control" v-model="captcha"-->
<#--                       @keyup.enter="login" placeholder="验证码">-->
<#--                <img alt="如果看不清楚，请单击图片刷新！" style="width: 45%;display: inline-block" class="pointer" :src="src"-->
<#--                     @click="refreshCode">-->
<#--            </div>-->
<#--            <div class="checkbox">-->
<#--                <label>-->
<#--                    <input type="checkbox" name="isRememberMe" v-model="isRememberMe">记住我,下次免登陆-->
<#--                </label>-->
<#--            </div>-->
<#--            <div class="row">-->
<#--                <div class="col-xs-12">-->
<#--                    <button type="button" class="btn btn-block btn-success btn-lg" @click="login">登录</button>-->
<#--                </div>-->
<#--            </div>-->
<#--        </div>-->
<#--    </div>-->
    <script src="js/jquery.min.js"></script>
    <#--<script src="js/vue.min.js"></script>-->
<#--    <script src="js/bootstrap.min.js"></script>-->
    <#--<script src="js/jquery.slimscroll.min.js"></script>-->
    <#--<script src="js/fastclick.min.js"></script>-->
<#--    <script src="js/app.js"></script>-->
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    ruleForm: {
                        username: 'admin',
                        password: 'admin',
                        age: ''
                    }
                }
            },

            // data: {
            //     username: 'admin',
            //     password: 'admin',
            //     captcha: '',
            //     error: false,
            //     errorMsg: '',
            //     isRememberMe: false,
            //     src: 'login/captcha'
            // },
            beforeCreate: function () {
                if (self != top) {
                    top.location.href = self.location.href;
                }
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                refreshCode: function () {
                    this.src = "login/captcha?t=" + $.now();
                },
                login: function (event) {
                    const self = this
                    // var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha + "&isRememberMe=" + vm.isRememberMe;
                    var data = "username=" + this.ruleForm.username + "&password=" + this.ruleForm.password;
                    $.ajax({
                        type: "POST",
                        url: "login/login",
                        data: data,
                        dataType: "json",
                        success: function (result) {
                            if (result.code === 20000) {//登录成功
                                self.$message.success('登录成功')
                                parent.location.href = 'index';
                            } else {
                                self.$message.error(result.message)
                                // vm.error = true;
                                // vm.errorMsg = result.msg;
                                // vm.refreshCode();
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>
